<template>
    <div class="BaseConfig">
        <!-- 按钮 -->
        <div>
        <el-carousel :interval="2000" type="card" height="400px" >
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./config.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item v-for="item in 0" :key="item">
          <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
    </div>
        <!-- {{param}} -->
        <div style="text-align:right">{{dateFormat(date)}}</div>
            <div class="btns">
                <el-form size="small" inline style="text-align:center">
                    <el-form-item label="名称" label-width="40px">
                        <el-input v-model="param.name"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" size="small" icon="el-icon-search" @click="loadBaseConfig">查询</el-button>
                    </el-form-item>
                </el-form>
                <div style="text-align:right">
                  <el-button size="small" type="primary" icon="el-icon-download" @click="downloadHandler">导出</el-button>
                  <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="toAddHandler">新增</el-button>
                </div>
            </div>          
        <!-- /按钮 -->
        <!-- {{BaseConfig}} -->
        <!-- 表格 -->
        <el-table size="small" :data="BaseConfig">
            <el-table-column type="index" :index="1" label="序号"></el-table-column>
            <el-table-column label="名称" prop="name" align="center"></el-table-column>
            <el-table-column label="属性" prop="val" align="center"></el-table-column>
            <el-table-column label="简介" prop="introduce" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <!-- 插槽 -->
                    <template slot-scope="scope">
                    <el-button type="primary" round  size="mini" icon="el-icon-edit" circle @click="editHandler(scope.row)">修改</el-button>
                    <el-button type="danger" round size="mini" icon="el-icon-delete" circle @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                <!-- /插槽 -->
            </el-table-column>           
         </el-table>
        <!-- /表格 -->

<!-- 小星星 -->
    <div class="star" id="app">
    <el-rate
      v-model="value"
      show-text>
    </el-rate>
    </div>
<!--/小星星 -->

<!-- 回到顶部 -->
    <div class="foot" >
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-caret-top">返回顶部</el-button>
      </el-form-item> -->
      <a href="#top" target="_self">返回顶部</a>
    </div>
<!-- /回到顶部 -->
        
    </div>    
</template>

<style>
.foot{
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  text-align: center;
  line-height: 40px;
  padding-top: 5px;
  padding-left: 0%;
  font-size: 14px;
  color: #4400ff;
}

.foot p{
  color: #1900ff;
}
.test p{
  float: left;
  color: #fff;
  margin: 14px auto;
  padding-left: 20px;
  font-size: 16px;
}

.star{
  text-align: center;
  width: 100%;
  height: 50px;
  padding: 20px;
}
</style>

<script>
import {del, get,post} from '@/utils/request'
export default {
    
    // 页面数据
    data(){
        
        return {
            //参数，
            param:{},

            //组件模板中需要的数据；
            BaseConfig:[],

            date:new Date()
        }
     },
    // 页面渲染的时候会调用的函数
    created(){
        this.loadBaseConfig();
    },
    // 所有的方法
    methods:{
      dateFormat(time) {
          var date=new Date(time);
          var year=date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
          * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
          * */
          var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
      //导出
      downloadHandler(){
        window.location.href="http://121.196.106.124:8888/baseConfig/download?name="+this.param.name
      },
        //修改事件的处理函数
        editHandler(row){
            this.$router.push({
                path:"/Dateset/BaseConfig_create",
                query:row

            })
        },
        //删除函数处理函数
            deleteHandler(row) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let url = 'http://121.196.106.124:8888/baseConfig/deleteById';
                del(url, { id: row.id }).then((resp) => {
                this.$message({ type: "success", message: resp.message });
                this.loadBaseConfig();

                
            });
        });
    },

        //跳转
        toAddHandler(){
            this.$router.push("/Dateset/BaseConfig_create")
        },
        //查询后台中的应用信息
        loadBaseConfig(){
            let url = 'http://121.196.106.124:8888/baseConfig/query'
            get(url,this.param).then((resp)=>{
            this.BaseConfig = resp.data;
        })
    }
},
 mounted() {
          //显示当前日期时间
          let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
          this.timer = setInterval(() => {
           _this.date = new Date(); // 修改数据date
           }, 1000)
       },
      beforeDestroy() {
       if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
}

}
</script>

<style scoped>


</style>
